import { Img, ImgProps } from "./Img"
import avatar1 from '../assets/img/common/avator/photo.jpeg'
import avatar2 from '../assets/img/common/avator/photo2.jpeg'
import avatar3 from '../assets/img/common/avator/photo3.jpeg'
import avatar4 from '../assets/img/common/avator/photo4.jpeg'
import avatar5 from '../assets/img/common/avator/photo5.jpeg'
import avatar6 from '../assets/img/common/avator/photo6.jpeg'
import avatar7 from '../assets/img/common/avator/photo7.jpeg'
import avatar8 from '../assets/img/common/avator/photo8.jpeg'
import { useUserInfoStore } from "../mobx"
import { observer } from "mobx-react-lite"
import { StyleSheet, View } from "react-native"
import { mergeStyles } from "../themes"
import { ObserverView } from "./ObserverView"
import { dpw44 } from "../constants"

export const Avatar = observer((props: Omit<ImgProps, 'url'>) => {
    const { userInfo } = useUserInfoStore()
    
    const getUrl = () => {
        switch (userInfo?.HeadImg) {
        case '2':
            return avatar2
        case '3':
            return avatar3
        case '4':
            return avatar4
        case '5':
            return avatar5
        case '6':
            return avatar6
        case '7':
            return avatar7
        case '8':
            return avatar8
        default:
            return avatar1
        }
    }
    
    return (
        <ObserverView style={styles.box} themeStyle={{ backgroundColor: 'color_2' }}>
            <Img isJoin={false} {...props} url={getUrl()} />
        </ObserverView>
    )
})

const styles = StyleSheet.create({
    box: {
        padding: 2,
        borderRadius: dpw44,
        overflow: 'hidden'
    }
})